const echarts = require("echarts");

const option = {
  legend: {
    top: 17,
    right: 20,
    icon: "roundRect",
    itemWidth: 10,
    itemHeight: 8,
    itemGap: 15,
    textStyle: {
      fontFamily: "MicrosoftYaHei",
      fontSize: 14,
      color: "rgba(255, 255, 255, 1)",
    },
    data: ["发现件数", "整改件数"],
  },
  grid: {
    top: "10%",
    left: "220",
    right: "2%",
    bottom: "10%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "rgba(113, 113, 113, 1)",
      },
    },
    backgroundColor: "rgba(42, 51, 74, 1)",
    borderColor: "transparent",
    formatter: function (params) {
      let colors = ["rgba(124, 124, 191, 1)", "rgba(233, 195, 116, 1)"];
      let returnData = '<div style="padding: 5px 10px;">';
      returnData +=
        '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(210, 221, 249, 1);">' +
        params[0].axisValue +
        "</span><br/>";
      for (let i = 0; i < params.length; i++) {
        returnData +=
          '<span style="display:inline-block; width:10px; height:8px; margin-right:5px; border-radius:1px; background-color:' +
          colors[i] +
          '"></span>';
        returnData +=
          '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: ' +
          colors[i] +
          '">' +
          params[i].seriesName +
          '：</span><span style="font-family: Verdana; font-size: 14px; color: ' +
          colors[i] +
          '">' +
          params[i].value +
          '</span><span style="display:inline-block; margin-left: 4px; line-height: 10px; font-family: MicrosoftYaHei; font-size: 12px; color: ' +
          colors[i] +
          '">件</span><br/>';
      }
      returnData += "</div>";
      return returnData;
    },
  },
  xAxis: {
    type: "category",


    axisLine: {
      show: true,
      lineStyle: {
        color: "white", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
        type: "solid", //y轴线为实线
      },
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      fontFamily: "MicrosoftYaHei",
      fontSize: 12,
      color: "white",
    },
    axisTick: {
      show: false,
      alignWithLabel: true,
    },
    boundaryGap: false,
    data: [
      "Jan",
      "Fab",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
  },
  yAxis: {
    type: "value",
    name: "",
    nameTextStyle: {
      fontFamily: "MicrosoftYaHei",
      fontSize: 12,
      color: "white",
    },
    min: 0,
    axisLine: {
      show: true,
      lineStyle: {
        color: "white", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
        type: "solid", //y轴线为实线
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: "rgba(52, 51, 51, 0.8)",
      },
    },
    axisLabel: {
      show: true,
      margin: 20,
      textStyle: {
        fontFamily: "MicrosoftYaHei",
        fontSize: 12,
        color: "white",
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: "发现件数",
      type: "line",
      showAllSymbol: true,
      symbol: "circle",
      symbolSize: 5,
      lineStyle: {
        color: "rgba(155, 155, 226, 1)",
      },
      label: {
        show: false,
      },
      itemStyle: {
        color: "rgba(155, 155, 226, 0.8)",
        borderColor: "rgba(155, 155, 226, 0.8)",
        borderWidth: 3,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(155, 155, 226, 0.8)",
              },
              {
                offset: 1,
                color: "rgba(155, 155, 226, 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(155, 155, 226, 0.8)",
          shadowBlur: 20,
        },
      },
      data: [15, 9, 18, 22, 5, 7, 14, 11, 8, 5, 8, 12],
    },
    {
      name: "整改件数",
      type: "line",
      showAllSymbol: true,
      symbol: "circle",
      symbolSize: 5,
      lineStyle: {
        color: "rgba(233, 195, 116, 1)",
      },
      label: {
        show: false,
      },
      itemStyle: {
        color: "rgba(233, 195, 116, 0.8)",
        borderColor: "rgba(233, 195, 116, 0.8)",
        borderWidth: 3,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(233, 195, 116, 0.8)",
              },
              {
                offset: 1,
                color: "rgba(233, 195, 116, 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(233, 195, 116, 0.8)",
          shadowBlur: 20,
        },
      },
      data: [11, 9, 12, 21, 4, 6, 17, 12, 7, 6, 8, 10],
    },
  ],
};
export default option;
